<template>
  <CommonHeader :title="basicInfo.name || '详情页'" />
  <div class="container">
    <!-- 轮播 -->
    <van-swipe class="detail-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in pics" :key="banner.id">
        <img :src="banner.pic" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- /轮播 -->
    {{ basicInfo.name }}

    <div class="content" v-html="content"></div>
  </div>
  <!-- 商品行动栏 -->
  <van-action-bar>
    <van-action-bar-icon icon="wap-home-o" text="首页" />
    <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
    <van-action-bar-button type="warning" text="加入购物车" @click="showPop('cart')" />
    <van-action-bar-button type="danger" text="立即购买" @click="showPop('order')" />
  </van-action-bar>
  <!-- /商品行动栏 -->
  <!-- 商品规格弹窗 -->
  <van-popup
    v-model:show="skuPopStatus"
    closeable
    round
    position="bottom"
    :style="{ height: '40%', padding: '15px' }"
  >
    <div>
      <van-card
        :num="sku.number"
        :price="sku.minPrice"
        :title="sku.name"
        :thumb="sku.pic"
      >
        <template #footer>
          <van-stepper v-model="sku.number" :min="1" />
        </template>
      </van-card>
      <van-button type="danger" block round @click="clikConfirmBtn">确定</van-button>
    </div>
  </van-popup>
  <!-- /商品规格弹窗 -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import CommonHeader from "@/components/CommonHeader.vue";
import api from "@/api";
const route = useRoute();

// 获取商品详情
const basicInfo = ref<any>({});
const content = ref<string>("");
const pics = ref<any[]>([]);
const sku = ref<any>({});
const fetchDetail = () => {
  api.fetchDetail(route.query.id as string).then((res) => {
    if (res.data.code === 0) {
      if (res.data.code === 0) {
        basicInfo.value = res.data.data.basicInfo;
        content.value = res.data.data.content.replace(
          /<img/gi,
          "<img style='display:block;width:100%'"
        );
        pics.value = res.data.data.pics;
        sku.value = {
          ...basicInfo.value,
          number: 1,
        };
      }
    }
  });
};

// 商品规格弹窗状态
const skuPopStatus = ref(false);
// 显示商品规格弹窗
let action = "cart"; // cart加入购物车 order 立即购买
const showPop = (actionType: string) => {
  action = actionType;
  skuPopStatus.value = true;
};
// 点击商品规格弹窗确定按钮
const clikConfirmBtn = () => {
  if (action === "cart") {
    alert("点击加入购物车");
  } else {
    alert("点击立即购买");
  }
  skuPopStatus.value = false;
};
onMounted(() => {
  fetchDetail();
});
</script>

<style scoped lang="scss">
.container {
  padding-top: 46px;
  padding-bottom: 50px;
  .detail-swipe {
    width: 10rem;
    height: 5rem;
    img {
      width: 10rem;
      height: 5rem;
    }
  }
  /* .content {
    :deep img {
      display: block;
      width: 100%;
    }
  } */
}
</style>
